<!-- src/components/Sidebar.vue -->
<template>
  <el-aside class="sidebar">
    <el-menu
        :default-active="activeMenu"
        router
        class="el-menu-vertical-demo"
        background-color="#2c3e50"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
      <el-menu-item index="/main/companies">货代公司管理</el-menu-item>
      <el-menu-item index="/main/port">港口管理</el-menu-item>
      <el-menu-item index="/main/import-orders">进口订单管理</el-menu-item>
      <el-menu-item index="/main/export-orders">出口订单管理</el-menu-item>
      <el-menu-item index="/main/warehouse">仓库</el-menu-item>
      <el-menu-item index="/main/fees">费用详情</el-menu-item>
      <el-menu-item index="/login" @click="handleLogout">退出</el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      activeMenu: '/main/companies'
    };
  },
  methods: {
    handleLogout() {
      localStorage.removeItem('isAuthenticated');
      localStorage.removeItem('token');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #2c3e50;
}

.el-menu-vertical-demo {
  width: 100%;
  border-right: none;
}
</style>
